/*页面最底部，在静态页面出现之后再执行*/
// document 整个文档 添加了一个事件监听器
//首要渲染界面，html+css 不需要js参与
// DOMContentLoaded 事件在文档解析完成后触发，不等待样式表、图片等资源加载完成
// DOM 文档对象模型
//script会阻塞html的下载
document.addEventListener('DOMContentLoaded', function() {
    // 页面加载完成后执行的代码
    // 可以获取页面元素、添加事件监听器等、
    function playSound(event){
        //事件对象，在事件发生的时候会给回调函数
        //keyCode 按下的键的编码
        console.log(
            '你按下了键盘上的' + event.keyCode
        );
        let keyCode = event.keyCode;
        let element = document.querySelector('.key[data-key="'+keyCode+'"]');
        console.log(element);
        //动态添加类名
        element.classList.add('playing');
    }
    window.addEventListener('keydown',playSound);
});
